<!-- 储存基础控件 -->
<template>
  <!-- 单行文本 -->
  <Text
    v-if="componentType === 'TEXT'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </Text>

  <!-- 多行文本 -->
  <TextArea
    v-if="componentType === 'TEXT_AREA'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </TextArea>

  <!-- 数字 -->
  <Number
    v-if="componentType === 'TEXT_NUMBER'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </Number>

  <!-- 日期 -->
  <Date
    v-if="componentType === 'DATE'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </Date>

  <!-- 日期（周） -->
  <DateWeek
    v-if="componentType === 'DATE_WEEK'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </DateWeek>

  <!-- 日期（月） -->
  <DateMonth
    v-if="componentType === 'DATE_MONTH'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </DateMonth>

  <!-- 日期（年） -->
  <DateYear
    v-if="componentType === 'DATE_YEAR'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </DateYear>

  <!-- 日期（季度） -->
  <DateQuarter
    v-if="componentType === 'DATE_QUARTER'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </DateQuarter>

  <!-- 日期范围 -->
  <DateRange
    v-if="componentType === 'DATE_RANGE'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </DateRange>

  <!-- 下拉选择 -->
  <Select
    v-if="componentType === 'SELECT'"
    :props="getProps"
    :code="code"
    :name="name"
    v-model:oneValue="oneValue"
    :selectOptions="selectOptions"
    :regex="regex"
    :disabled="disabled"
  >
  </Select>

  <!-- 单选框 -->
  <Radio
    v-if="componentType === 'RADIO'"
    :props="getProps"
    :code="code"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </Radio>

  <!-- 多选框 -->
  <CheckBox
    v-if="componentType === 'CHECK_BOX'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </CheckBox>

  <!-- 单文件上传 -->
  <SingleFile
    v-if="componentType === 'SINGLE_FILE'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </SingleFile>

  <!-- 多文件上传 -->
  <MultiFile
    v-if="componentType === 'MULTI_FILE'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </MultiFile>

  <!-- 单图片上传 -->
  <SinglePicture
    v-if="componentType === 'SINGLE_PICTURE'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </SinglePicture>

  <!-- 多图片上传 -->
  <MultiPicture
    v-if="componentType === 'MULTI_PICTURE'"
    :props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  >
  </MultiPicture>
  <FileUpload
    v-if="componentType === 'FILE_UPLOAD'"
    v-model:props="getProps"
    :name="name"
    v-model:oneValue="oneValue"
    :regex="regex"
    :disabled="disabled"
  />
  <div v-if="componentType === 'DETAIL_TABLE'">
    <TableDetail :data="childrenCtl"> </TableDetail>
  </div>
</template>

<script setup lang="ts">
import Radio from './Radio.vue';
import Select from './Select.vue';
import CheckBox from './CheckBox.vue';
import FileUpload from './components/FileUpload/index.vue';
import { useVModel } from '@vueuse/core';
import ControlBase from './index.vue';
import TableDetail from './TableDetail/index.vue';

const props = withDefaults(
  //参数说明
  defineProps<{
    componentType?: string;
    code?: string;
    props: { [propName: string]: any };
    name?: string;
    required?: boolean | number;
    values: any;
    disabled?: boolean;
    selectOptions?: any[];
    childrenCtl?: any[];
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {
    selectOptions: () => []
  }
);

const emit = defineEmits(['update:values', 'update:props']);
//复制一份props
const getProps = useVModel(props, 'props', emit);

//当value只用到第一个绑定这个参数
const oneValue = computed({
  get() {
    return props.values;
  },
  set(val) {
    emit('update:values', val);
  }
});
</script>

<style scoped lang="less"></style>
